*,body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-size: cover;
    background-color: rgba(128, 128, 128, .8);
    padding: 0 10px;
    color: lavender;
}
ul,ol,li {
    list-style: none;
}

a {
    text-decoration: none;
    color: lavender;
}

a:hover {
    color: RoyalBlue;
}

footer {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%);
}

.row {
    display: flex;
    /* 源代码里面没有自动换行 */
    flex-wrap: wrap;
    width: 100%;
    margin-left: -8px;
    margin-right: -8px;
    color: lavender;
}
/* 不能设置row.a.hover会失效.一定要的话,再加下hover */

.row__cell {
    /* 设置单元格大小 */
    /* width不用设置，用了flex */
    height: 100px;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    letter-spacing: 1px;

    /* 上右下左 */
    margin: 8px 8px 8px 8px;


    padding-left: 8px;
    padding-right: 8px;
    border-radius: 20px;
    border-top: 1px solid rgba(255, 255, 255, .5);
    border-left: 1px solid rgba(255, 255, 255, .5);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    border-right: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px);
    background: rgba(50, 50, 50, .2);
}
.row__cell .content{
    font-size: 24px;
}

.row__cell .description{
    font-size: 12px;
}

/* 用于填充的盒子 */
.row__cell--fill {
    flex: 1;
}

/* 设置固定盒子大小，25%可以替换成想要的大小 */
.row__cell--box {
    flex: 0 0 var(--num);
}